<template>
  <div class="system">
    <div class="topHeader">
      <div class="warpContent">
        <p>数据管控系统</p>
        <img src="/image/others/downward.png" />
      </div>
    </div>
    <div class="contentWarP">
      <div class="content">
        <div class="title">数据管控系统——数据信息精细化管理</div>
        <div class="conC">
          <div class="conCT margin50">传统>></div>
          <div class="conCC">
            <p>
              传统的招商数据分析，是通过手工收集信息，之后再由专人进行相关的数据分析；结果是数据不一定准确，分析的结果也不正确。
            </p>
            <p>效率低下，费时费力。</p>
          </div>
        </div>
        <div class="conC">
          <div class="conCT margin30">现在>></div>
          <div class="conCC">
            <p>
              企业计划启动市场招商，但没有数据管理系统，或者客户信息转化率低，公司依据团队10年招商经验，成功研发了一套成熟的数据管控系统——生意港数据管控系统。
            </p>
            <p>
              系统已打通短信平台、呼叫系统的端口，在市场管控严格的情况下，依然可以和客户进行沟通，提高沟通效率。
            </p>
            <p>
              数据管控系统，可解决企业推广费用高及员工转化能力低等问题，进而降低企业运营成本、提高运营效率
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="footerC">
      <div class="title">生意港定制的数据管控系统解决</div>
      <div class="introduce margin15">
        <div>
          <img src="/image/others/costmanage.png" alt />
          <span>推广费用管控</span>
        </div>
        <div>
          <img src="/image/others/transformationAnalysis.png" alt />
          <span>客户转化分析</span>
        </div>
      </div>
      <div class="introduce margin34">
        <div>
          <img src="/image/others/effectAnalysis.png" alt />
          <span>平台效果分析</span>
        </div>
        <div>
          <img src="/image/others/AbilityToMonitor.png" alt />
          <span>员工能力监控</span>
        </div>
      </div>
      <div class="picGroup clearfix">
        <img src="http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/picGroup1.png-1593655093000" alt />
        <img src="http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/picGroup2.png-1593655095000" alt />
        <img src="http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/picGroup3.png-1593655098000" alt />
        <img src="http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/picGroup4.png-1593655100000" alt />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.topHeader {
  background: url("http://syg-photo.oss-cn-shanghai.aliyuncs.com/yingdin/photo/systembg.png-1593655135000") no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 669px;
}
.warpContent {
  padding-top: 247px;
  margin: 0 auto;
  width: 1068px;
  p {
    font-size: 79px;
    letter-spacing: 4px;
    color: #ffffff;
  }
  img {
    margin-top: 40px;
    width: 74px;
    height: 75px;
  }
}
.contentWarP {
  background-color: #f8f8f9;
}
.content {
  width: 1068px;
  margin: 0 auto;
  padding-bottom: 90px;
  .title {
    padding-top: 37px;
    font-size: 38px;
    line-height: 105px;
    letter-spacing: 3px;
    color: #246be0;
  }
  .conCT {
    font-size: 28px;
    letter-spacing: 2px;
    padding-bottom: 17px;
    color: #246be0;
    background: url("/image/others/bottombor.png") no-repeat bottom left;
  }
  .margin50 {
    margin-top: 50px;
  }
  .margin30 {
    margin-top: 30px;
  }
  .conCC {
    line-height: 44px;
    font-size: 18px;
    letter-spacing: 1px;
    color: #5b5b5b;
  }
}
.footerC {
  padding-bottom: 100px;
  width: 1184px;
  margin: 0 auto;
  .title {
    text-align: center;
    font-size: 38px;
    letter-spacing: 3px;
    color: #5b5b5b;
    line-height: 179px;
  }

  .introduce {
    width: 650px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    & > div {
      display: flex;
      align-items: center;
      span {
        font-size: 24px;
        letter-spacing: 2px;
        color: #5b5b5b;
        margin-left: 27px;
      }
      img {
        width: 55px;
        height: 55px;
      }
    }
  }
}
.margin15 {
  padding-top: 15px;
}
.margin34 {
  padding-top: 34px;
}
.picGroup {
  position: relative;
  margin-top: 108px;
  img:nth-of-type(1) {
    margin-top: 97px;
    position: relative;
    z-index: 4;
    width: 541px;
    height: 630px;
  }
  img:nth-of-type(2) {
    top: 90px;
    width: 542px;
    height: 615px;
    left: 256px;
    z-index: 3;
    position: absolute;
  }
  img:nth-of-type(3) {
    top: 49px;
    width: 543px;
    height: 624px;
    left: 469px;
    z-index: 2;
    position: absolute;
  }
  img:nth-of-type(4) {
    top: 0px;
    width: 549px;
    height: 621px;
    left: 635px;
    z-index: 1;
    position: absolute;
  }
}
</style>
